<tr *ngIf="_firstRowOffset < labelMinRequiredCells">
  <td class="fui-calendar-body-label"
    [attr.colspan]="numCols"
    [style.paddingTop.%]="40 * cellAspectRatio / numCols"
    [style.paddingBottom.%]="40 * cellAspectRatio / numCols">
    {{label}}
  </td>
</tr>

<tr *ngFor="let row of rows; let rowIndex = index" role="row">
  <td *ngIf="rowIndex === 0 && _firstRowOffset"
    class="fui-calendar-body-label"
    [attr.colspan]="_firstRowOffset"
    [style.paddingTop.%]="30 * cellAspectRatio / numCols"
    [style.paddingBottom.%]="30 * cellAspectRatio / numCols">
    {{_firstRowOffset >= labelMinRequiredCells ? label : ''}}
  </td>
  <td *ngFor="let item of row; let colIndex = index"
    role="gridcell"
    class="fui-calendar-body-cell"
    [tabindex]="_isActiveCell(rowIndex, colIndex) ? 0 : -1"
    [class.fui-calendar-body-disabled]="!item.enabled"
    [class.fui-calendar-body-active]="_isActiveCell(rowIndex, colIndex)"
    (click)="_cellClicked(item)">
    <button class="fui-calendar-body-cell-content"
      [class.year-view-cell-content]="view === 'year'"
      [class.fui-calendar-body-selected]="selectedValue === item.value"
      [class.fui-calendar-body-today]="todayValue === item.value">
      <div class="ripple-out"></div>
      <span>{{item.displayValue}}</span>
    </button>
  </td>
</tr>
